<template>
  <div class="page">
    <el-form
      size="small"
      :inline="true"
      class="query-form"
      ref="searchForm"
      :model="searchForm"
      @keyup.enter.native="refreshList()"
      @submit.native.prevent
    >
      <!-- 搜索框-->
      <el-form-item prop="customerName">
        <el-input
          size="small"
          v-model="searchForm.customerName"
          placeholder="客户名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="personName">
        <el-input
          size="small"
          v-model="searchForm.personName"
          placeholder="负责人姓名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="personPhone">
        <el-input
          size="small"
          v-model="searchForm.personPhone"
          placeholder="负责人电话"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="systemName">
        <el-input
          size="small"
          v-model="searchForm.systemName"
          placeholder="系统负责人姓名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item style="float:right">
        <el-button type="primary" @click="refreshList()" size="small"
          >查询</el-button
        >
        <el-button @click="resetSearch()" size="small">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 导入导出-->
    <el-dialog title="导入Excel" :visible.sync="isImportCollapse">
      <el-form
        :inline="true"
        v-show="isImportCollapse"
        class="query-form"
        ref="importForm"
      >
        <el-form-item>
          <el-button type="default" @click="downloadTpl()" size="small"
            >下载模板</el-button
          >
        </el-form-item>
        <el-form-item prop="loginName">
          <el-upload
            class="upload-demo"
            :action="`${this.$http.BASE_URL}/dlyrl/hr/guestsentiment/guestSentiment/import`"
            :on-success="uploadSuccess"
            :show-file-list="true"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只允许导入“xls”或“xlsx”格式文件！
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="bg-white top">
      <el-row>
        <el-button type="primary" size="small" icon="el-icon-plus" @click="add()">新建</el-button>
        <el-button
          v-if="hasPermission('dlyrl:hr:guestsentiment:guestSentiment:edit')"
          type="warning"
          size="small"
          icon="el-icon-edit-outline"
          @click="edit()"
          :disabled="dataListSelections.length != 1"
          plain
          >修改</el-button
        >
        <!-- <el-button v-if="hasPermission('dlyrl:hr:guestsentiment:guestSentiment:del')" type="danger"   size="small" icon="el-icon-delete" @click="del()"
                  :disabled="dataListSelections.length <= 0" plain>删除
        </el-button> -->
        <el-button-group class="pull-right">
          <el-button
            v-if="
              hasPermission('dlyrl:hr:guestsentiment:guestSentiment:import')
            "
            type="default"
            size="small"
            icon="el-icon-upload2"
            title="导入"
            @click="
              (isImportCollapse = !isImportCollapse), (isSearchCollapse = false)
            "
          ></el-button>
          <el-button
            v-if="
              hasPermission('dlyrl:hr:guestsentiment:guestSentiment:export')
            "
            type="default"
            size="small"
            icon="el-icon-download"
            title="导出"
            @click="exportExcel()"
          ></el-button>
          <el-button
            type="default"
            size="small"
            icon="el-icon-refresh"
            @click="refreshList"
          >
          </el-button>
        </el-button-group>
      </el-row>
      <el-table
      :row-style="TableRowStyle"
        :data="dataList"
        @selection-change="selectionChangeHandle"
        @sort-change="sortChangeHandle"
        v-loading="loading"
        size="small"
        :cell-style="cellStyle" style="border:1px solid #d6cfe2;"
        :header-cell-class-name="cellHeadStyle" :row-class-name="tableRowClassName"
        height="calc(100% - 80px)"
        @expand-change="detail"
        class="table"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        >
        </el-table-column>
        <!-- <el-table-column type="expand">
          <template slot-scope="scope">
            <el-tabs>
              <el-tab-pane label="客情礼品赠送">
                <el-table
                  size="small"
                  :data="scope.row.guestGiftList"
                  style="width: 100%;border:1px solid #d6cfe2;"
                  :cell-style="cellStyle"
                  :header-cell-class-name="cellHeadStyle" :row-class-name="tableRowClassName"
                > 
                <el-table-column
                    prop="time"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="日期">
                  </el-table-column>
                  <el-table-column
                    prop="giftname"
                    show-overflow-tooltip
                    label="名称"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="giftcount"
                    show-overflow-tooltip
                    label="数量"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="expressname"
                    show-overflow-tooltip
                    label="快递名称"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="expressnumber"
                    show-overflow-tooltip
                    label="快递单号"
                  >
                  </el-table-column>
                  <el-table-column prop="operator.name" label="操作人">
                  </el-table-column>
                  <el-table-column
                    prop="remarks"
                    show-overflow-tooltip
                    label="备注信息"
                  >
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </template>
        </el-table-column> -->
        <el-table-column
          prop="customerName.companyName"
          show-overflow-tooltip 
          label="客户"
        >
          <!-- <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              v-if="
                hasPermission('dlyrl:hr:guestsentiment:guestSentiment:edit')
              "
              @click="edit(scope.row.id)"
              >{{ scope.row.customerName.companyName }}</el-link
            >
            <el-link
              type="primary"
              :underline="false"
              v-else-if="
                hasPermission('dlyrl:hr:guestsentiment:guestSentiment:view')
              "
              @click="view(scope.row.id)"
              >{{ scope.row.customerName.companyName }}</el-link
            >
            <span v-else>{{ scope.row.customerName.companyName }}</span>
          </template> -->
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="view(scope.row.id)"
              >{{ scope.row.customerName.companyName }}</el-link
            >
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="customerArea"
          show-overflow-tooltip 
          label="客户地址"
        >
        </el-table-column> -->
        <el-table-column
          prop="personName.userName"
          show-overflow-tooltip 
          label="负责人"
        >
        </el-table-column>
        <el-table-column
          prop="personPhone"
          show-overflow-tooltip 
          label="负责人电话"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="personArea"
          show-overflow-tooltip 
          label="负责人地址"
        >
        </el-table-column> -->
        <!-- <el-table-column
          prop="personCard"
          show-overflow-tooltip 
          label="负责人身份证号"
        >
        </el-table-column> -->
        <el-table-column
          prop="personOffice"
          show-overflow-tooltip 
          label="负责人部门"
        >
        </el-table-column>
        <el-table-column
          prop="systemName.name"
          show-overflow-tooltip 
          label="客户经理姓名"
        >
        </el-table-column>
        <el-table-column
          prop="systemPhone"
          show-overflow-tooltip 
          label="客户经理电话"
        >
        </el-table-column>
        <el-table-column
          prop="remarks"
          show-overflow-tooltip 
          label="备注信息"
        >
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          :key="Math.random()"
          width="200"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-if="
                hasPermission('dlyrl:hr:guestsentiment:guestSentiment:view')
              "
              type="text"
              icon="el-icon-view"
              size="mini"
              @click="view(scope.row.id)"
              >查看</el-button
            >
            <el-button
              v-if="
                hasPermission('dlyrl:hr:guestsentiment:guestSentiment:edit')
              "
              type="text"
              icon="el-icon-edit"
              size="mini"
              @click="edit(scope.row.id)"
              >修改</el-button
            >
            <el-button
              v-if="hasPermission('dlyrl:hr:guestsentiment:guestSentiment:del')"
              type="text"
              icon="el-icon-delete"
              size="mini"
              @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageNo"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <GuestSentimentForm
      ref="guestSentimentForm"
      @refreshDataList="refreshList"
    ></GuestSentimentForm>
  </div>
</template>

<script>
import tableStyles from '../../../../../utils/mixins.js'
import GuestSentimentForm from "./GuestSentimentForm";
import GridSelect from "@/components/gridSelect";
import UserSelect from "@/components/userSelect";
export default {
    mixins: [tableStyles],
  data() {
    return {
      searchForm: {
        customerName:'',
        personName: '',
        personPhone: "",
        systemName: '',
      },
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      orderBy: "",
      dataListSelections: [],
      isImportCollapse: false,
      loading: false,
    };
  },
  components: {
    GridSelect,
    UserSelect,
    GuestSentimentForm,
  },
  activated() {
    this.refreshList();
  },
  methods: {
    TableRowStyle({ row, rowIndex }) {
        // 注意，这里返回的是一个对象
        let rowBackground = {};
          rowBackground.background = row.color;
          return rowBackground;
      },
    // 获取数据列表
    refreshList() {
      this.loading = true;
      this.$http({
        url: "/dlyrl/hr/guestsentiment/guestSentiment/list",
        method: "get",
        params: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          orderBy: this.orderBy,
          company:this.$store.state.user.companyId,
          ...this.searchForm,
        },
      }).then(({ data }) => {
        if (data && data.success) {
          this.dataList = data.page.list;
          this.total = data.page.count;
          this.loading = false;
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.refreshList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.refreshList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },

    // 排序
    sortChangeHandle(obj) {
      if (obj.order === "ascending") {
        this.orderBy = obj.prop + " asc";
      } else if (obj.order === "descending") {
        this.orderBy = obj.prop + " desc";
      } else {
        this.orderBy = "";
      }
      this.refreshList();
    },
    // 新增
    add() {
      this.$refs.guestSentimentForm.init("add", "");
    },
    // 修改
    edit(id) {
      id =
        id ||
        this.dataListSelections.map((item) => {
          return item.id;
        })[0];
      this.$refs.guestSentimentForm.init("edit", id);
    },
    // 查看
    view(id) {
      this.$refs.guestSentimentForm.init("view", id);
    },
    // 删除
    del(id) {
      let ids =
        id ||
        this.dataListSelections
          .map((item) => {
            return item.id;
          })
          .join(",");
      this.$confirm(`确定删除所选项吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        this.$http({
          url: "/dlyrl/hr/guestsentiment/guestSentiment/delete",
          method: "delete",
          params: { ids: ids },
        }).then(({ data }) => {
          if (data && data.success) {
            this.$message.success(data.msg);
            this.refreshList();
          }
          this.loading = false;
        });
      });
    },
    // 查看详情
    detail(row) {
      this.$http
        .get(`/dlyrl/hr/guestsentiment/guestSentiment/queryById?id=${row.id}`)
        .then(({ data }) => {
          this.dataList.forEach((item, index) => {
            if (item.id === row.id) {
              item.guestGiftList = data.guestSentiment.guestGiftList;
            }
          });
        });
    },
    // 导入成功
    uploadSuccess(res, file) {
      if (res.success) {
        this.$message.success({
          dangerouslyUseHTMLString: true,
          message: res.msg,
        });
      } else {
        this.$message.error(res.msg);
      }
    },
    // 下载模板
    downloadTpl() {
      this.$utils.download(
        "/dlyrl/hr/guestsentiment/guestSentiment/import/template"
      );
    },
    exportExcel() {
      let params = {
        ...this.searchForm,
      };
      this.$utils.download(
        "/dlyrl/hr/guestsentiment/guestSentiment/export",
        params
      );
    },
    resetSearch() {
      this.$refs.searchForm.resetFields();
      this.refreshList();
    },
  },
};
</script>